<template>
  <div class="arithmetic">
    <div class="question">
      <span v-for="item in items" class="item" v-bind:key="item">{{ item }}</span>
      <span class="equal">=</span>
      <span class="answer">{{ answer }}</span>
      <button class="next" @click="next">下一题</button>
    </div>

    <div class="keyboard">
      <button @click="input('1')">1</button>
      <button @click="clear">清除</button>
      <button @click="compute">=</button>
    </div>
  </div>
</template>

<script>

import arithmetic from '../utils/arithmetic'

export default {
  name: "Arithmetic",
  props: {
    msg: String,
  },
  data() {
    return {
      items: ["1", "+", "2", "+", "1"],
      answer: "?",
    };
  },
  methods: {
    input(number) {
      if (this.answer === "?") {
        this.answer = number;
      } else {
        this.answer = this.answer + number;
      }
    },
    clear() {
      this.answer = "?";
    },
    next() {
      console.log(arithmetic)
      this.items = ["1", "+", "2", "+", "1"];
    },
    compute() {
      const q = this.items.join('');
      console.log('q: ' + q)
      this.answer = eval(q);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
